import React, { Component } from 'react'
import { connect } from 'react-redux'
import { hot } from 'react-hot-loader/root'
import { AppState } from '@stores/interface'
import { ZH_CN, EN_US } from 'cache'
import { UserContext } from 'app/context'
import {
  Button,
} from 'antd'
import * as styles from './index.scss'

const mapStateToProps = (state: AppState) => {
  return ({
    lang: state.getIn(['lang', 'lang'])
  })
}

type ReduxType = ReturnType<typeof mapStateToProps>

class Home extends Component<ReduxType> {

  static contextType = UserContext

  constructor(props: ReduxType) {
    super(props)
  }

  render() {

    return (
      <div className={styles.container}>
        <Button onClick={this.handleChangeLang} type="primary" data-tour='first-step'>切换语言</Button>
      </div>
    )
  }

  handleChangeLang = () => { Api.base.changeLang(this.props.lang === ZH_CN ? EN_US : ZH_CN) }
}
export default hot(connect(mapStateToProps)(Home))
